<template>
  <BasicDrawer @register="registerDrawer" :width="800" @close="onClose">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane tab="字段权限" key="field" forceRender>
        <AuthFieldConfig :headId="headId" v-model:authFields="authFields" />
      </a-tab-pane>
      <a-tab-pane v-if="hasDataAuth" tab="按钮权限" key="button" forceRender>
        <AuthButtonConfig :headId="headId" />
      </a-tab-pane>
      <a-tab-pane v-if="hasDataAuth" tab="数据权限" key="data" forceRender>
        <AuthDataConfig :headId="headId" :cgformId="cgformId" :authFields="authFields" />
      </a-tab-pane>
    </a-tabs>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import AuthFieldConfig from './setter/AuthFieldConfig.vue';
  import AuthButtonConfig from './manager/AuthButtonConfig.vue';
  import AuthDataConfig from './setter/AuthDataConfig.vue';

  export default defineComponent({
    name: 'AuthManagerDrawer',
    components: {
      BasicDrawer,
      AuthFieldConfig,
      AuthButtonConfig,
      AuthDataConfig,
    },
    props: {
      tableType: {
        type: Number,
        default: 1,
      },
    },
    emits: ['register'],
    setup(props) {
      const cgformId = ref('');
      const headId = ref('');
      const authFields = ref([]);
      const activeKey = ref('field');
      const hasDataAuth = computed(() => props.tableType == 1 || props.tableType == 2);
      const [registerDrawer, { closeDrawer }] = useDrawerInner((data) => {
        cgformId.value = data.cgformId;
        headId.value = cgformId.value + '?' + new Date().getTime();
        activeKey.value = 'field';
      });
      function onClose() {
        closeDrawer();
      }
      return {
        activeKey,
        cgformId,
        headId,
        authFields,
        hasDataAuth,
        onClose,
        registerDrawer,
      };
    },
  });
</script>
<style scoped>
  .onl-auth-tree-btns {
    margin-left: 10px;
  }

  .onl-auth-tree-btns button {
    margin: 0 5px 0 2px;
  }
</style>
